<template>
    <span @click="onClick">
        <span v-if="formattedDate">{{ formattedDate }}</span><span v-else>选择年月</span>

    </span>
    <van-popup v-model:show="showPicker" round position="bottom">
        <van-date-picker v-model="currentDate" type="year-month" title="选择年月" @confirm="onConfirm"
            :columns-type="columnsType" :formatter="formatter" :min-date="minDate" :max-date="maxDate"
            @cancel="showPicker = false" />
    </van-popup>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue';

const showPicker = ref(false);
const columnsType = ['year', 'month'];
const minDate = ref(new Date(2020, 0, 1))
const maxDate = ref(new Date(2030, 5, 1))
const formattedDate = ref('');
const props = defineProps({
    year: {
        type: [Number, String], // 支持数字和字符串类型
        default: ''
    },
    month: {
        type: [Number, String], // 支持数字和字符串类型
        default: ''
    },
    monthOffset: {
        type: [Number, String],
        default: 0
    },
    isEdit: {
        default: true
    }
});

const emit = defineEmits(['date-selected']);
const currentDate = ref();
const onClick = () => {
    if (props.isEdit) {
        showPicker.value = true;
    }
}

// 根据年份和月份设置日期
const setDateFromYearMonth = (year, month) => {
    if (year && month) {
        // 月份从0开始，所以需要减去1
        return new Date(parseInt(year, 10), parseInt(month, 10) - 1);
    }
    return new Date(); // 默认当前日期
};
// 根据 YYYYMM 格式的字符串设置日期
const parseDateFromString = (dateString) => {
    const year = parseInt(dateString.slice(0, 4), 10);
    const month = parseInt(dateString.slice(4, 6), 10) - 1; // 月份从0开始
    if (isNaN(year)) {
        return new Date();
    }
    if (isNaN(month)) {
        return new Date(year, 0);
    }
    return new Date(year, month);
};
// 根据偏移量计算日期
const calculateDateFromOffset = (offset) => {
    const currentDate = new Date();
    currentDate.setMonth(currentDate.getMonth() + parseInt(offset, 10));
    return currentDate;
};// 根据偏移量计算日期
const calculatQuJian = () => {
    const currentDate = new Date();
    const year = currentDate.getFullYear();
    minDate.value = new Date(year - 2, 0, 1)
    maxDate.value = new Date(year + 4, 11, 1)
    console.log(minDate.value, maxDate.value);
};
// 在组件挂载时设置初始日期
onMounted(() => {
    let initialDate = new Date();
    let isCallback = false;
    if (props.year && props.month) {
        // 如果传入了年份和月份
        initialDate = setDateFromYearMonth(props.year, props.month);
    } else if (typeof props.year === 'string' && /^\d{6}$/.test(props.year)) {
        // 如果年份是 YYYYMM 格式的字符串
        initialDate = parseDateFromString(props.year);
    } else if (typeof props.year === 'string' && /^\d{4}$/.test(props.year)) {
        // 如果年份是 YYYYMM 格式的字符串
        initialDate = parseDateFromString(props.year);
    } else if (props.monthOffset) {
        // 如果传入了月份偏移量
        initialDate = calculateDateFromOffset(props.monthOffset);
        isCallback = true;
    } else {
        isCallback = true;
        // 默认初始化为当前日期
        initialDate = new Date();
    }
    const year = initialDate.getFullYear();
    const month = (initialDate.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要加1 
    currentDate.value = [year, month];
    formattedDate.value = `${year}-${month}`;
    if (isCallback) {
        //需要初始化回调
        emit('date-selected', `${year}${month}`);
    }
    calculatQuJian()
});
const formatter = (type, option) => {
    if (type === 'year') {
        option.text += '年';
    }
    if (type === 'month') {
        option.text += '月';
    }
    return option;
};
const formatDate = (date) => {
    const year = date.selectedValues[0].toString();
    const month = date.selectedValues[1].toString();
    return `${year}-${month}`;
};

const onConfirm = (selectedDate) => {
    console.log(selectedDate);

    const year = selectedDate.selectedValues[0].toString();
    const month = selectedDate.selectedValues[1].toString();
    emit('date-selected', `${year}${month}`);
    formattedDate.value = `${year}-${month}`;
    showPicker.value = false;
};
</script>

<style>
/* 可根据需要自定义样式 */
</style>